<template>
    <li v-for="item in comments" :key="item.id">
        <span>{{ item.content }}</span>
        <span class="del" @click="del(item.id)">删除</span>
    </li>
</template>

<script setup>
// 子组件接收父组件传递的自定义属性prop
const props = defineProps(['comments', 'abc'])

// 子组件接收父组件传递的自定义事件
const emit = defineEmits(['delComment'])
// console.log(props.abc)

const del = (id) => {
    if (!confirm('确认删除吗')) {
        return
    }

    // 子通信父：告诉父亲删除数据
    emit('delComment', id)
}

</script>

<style>
li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    list-style-type: none;
    border-bottom: 1px solid #333;
}

li .del {
    color: blue;
    cursor: pointer;
}
</style>